<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<script type="text/javascript">
    $("#contact_datagrid").datagrid({
        url : '${ctx}/contact/list.do',
        pagination : true,
        fit : true,
        border : true,
        idField : 'id',
        pageSize : 1000,
        rownumbers : true,
        pageList : [  1000, 2000,3000 ],
        sortName : 'versionname',
        sortOrder : 'desc',
        singleSelect : true,
        columns : [ [ {
            field : 'id',
            hidden : true
        }, {
            field : 'addtime',
            title : '时间'
        }, {
            field : 'name',
            title : '姓名'
        }, {
            field : 'email',
            title : '邮箱'
        }, {
            field : 'tel',
            title : '电话'
        }, {
            field : 'need',
            title : '所要产品',
            width : 300,
            align : 'center'
        },{field:'operate',title:'操作',align:'center',width:$(this).width()*0.1,
            formatter:function(value, row, index){
                return "<a href='javacript:;'  onclick=contact_deail('" + row.id + "');>查看详细</a>";
            }}  ] ],
//        onLoadSuccess:function(data){
//            $("a[name='opera']").linkbutton({text:'查看详细',plain:true,iconCls:'icon-search'});
//        },
        toolbar : [  {
            text : '开始查询',
            iconCls : 'icon-search',
            handler : function() {
                searchTemplate();
            }
        },'-',{
            text : '重置查询',
            iconCls : 'icon-cancel',
            handler : function() {
                cleanTemplate();
            }
        },'-',{
            text : '删除',
            iconCls : 'icon-remove',
            handler : function() {
                car_remove();
            }
        } ]
    });

    function contact_deail(id){
        if(id){
            var contact_datagrid  = $("<div/>").dialog({
                title: '查看详细',
                width: 750,
                height: 500,
                closed: false,
                cache: false,
                resizable : true,
                href: '${ctx}/contact/edit?id='+id,
                modal: true,
                onClose:function(){
                    $(this).dialog('destroy');
                }
            });
        }
    }

    function car_remove() {
        var datagrid1 = $("#contact_datagrid");
        var rows = datagrid1.datagrid('getChecked');
        if(rows.length > 0){
            $.messager.confirm('确认','确认要删除吗？',function(r){
                if (r){
                    $.ajax({
                        url:'${ctx}/contact/delete.do',
                        data:{
                            ids:rows[0].id
                        },
                        dataType:'json',
                        success:function(data){
                            datagrid1.datagrid('load');
                            datagrid1.datagrid('unselectAll');//使全部的行形成未選中狀態
                            $.messager.show({
                                title:'提示',
                                msg:data.msg
                            });
                        }
                    });
                }
            });
        }else{
            $.messager.show({
                title:'提示',
                msg:'请至少选择一行来做删除操作！'
            });
        }
    }

    function searchTemplate(){
        $("#contact_datagrid").datagrid('load', $.serializeObject($('#searchForm')));
    }

    function cleanTemplate() {
        $("#searchForm input").val('');
        $("#contact_datagrid").datagrid('load', {});
    }
</script>


<div class="easyui-layout" data-options="fit : true,border : false">
    <!-- 中部面板是必须有的 -->
    <div data-options="region:'north',title:'条件筛选区',border:false" style="height:70px;overflow:hidden;">
        <form id="searchForm" method="post">
            <table>
                <tr>
                    <th>姓名</th>
                    <td><input class="easyui-textbox" data-options="prompt:'可模糊查询'" name="name"  style="width:200px;height:30px;"/></td>
                    <th>电话</th>
                    <td><input class="easyui-textbox" data-options="prompt:'可模糊查询'" name="tel"  style="width:200px;height:30px;"/></td>
                </tr>
            </table>
        </form>
    </div>
    <div data-options="region:'center',border:false">
        <table id="contact_datagrid"></table>
    </div>
</div>
